import React, {
    useState,
    useEffect,
    useLayoutEffect
} from "react";
import { Select, Checkbox, ConfigProvider, Pagination, message, Popover, Progress, Drawer, Upload, Radio, DatePicker } from "antd";
import { Empty, Loading } from "../../component/common";
import zhCN from "antd/es/locale/zh_CN";
import Search from "../component/search";
import TableList from "../component/fileList";
import moment from "moment";
// import domtoimage from "dom-to-image";
import Modal from "../component/modal";
import InfoOption from "../component/infoOption";
import BtnAlert from "../component/btnAlert";
import Scrollbars from "react-custom-scrollbars";
import fetch from "../../util/fetch";
import $ from "jquery";
import "./index.scss";

import { getQueryVariable, constructionDate, getRuleTime, getCurrentWeekDate } from "../../util/public";
import AddModal from "./addModal";
const { Option } = Select;

const { RangePicker } = DatePicker;
const tableHeader = [
    {
        key: "weekInfo",
        width: "31%",
        name: "值周老师"
    },
    {
        key: "dayInfo",
        width: "39%",
        name: "值日老师"
    },
    {
        key: "operate_group",
        width: "30%",
        padding: "0 0 0 9px",
        name: "操作"
    }
]
const weekTextInfo = {
    "1": "星期一",
    "2": "星期二",
    "3": "星期三",
    "4": "星期四",
    "5": "星期五",
    "6": "星期六",
    "7": "星期天",
    "0": "星期天",
}

function Main(props) {
    const [infoList, setInfoList] = useState([]);
    const [updateInfoList, setUpdateInfoList] = useState([]);
    const [loadVisible, setLoadVisible] = useState(false);

    const [currentIndex, setCurrentIndex] = useState(0);
    const [termWeekList, setTermWeekList] = useState([]);
    const [currentWeek, setCurrentWeek] = useState("");

    const [alertInfo, setAlertInfo] = useState({});

    const [term, setTerm] = useState("");
    const [termList, setTermList] = useState([]);
    const [currentTermInfo, setCurrentTermInfo] = useState({});

    const [addModalVisible, setAddModalVisible] = useState(false);
    const [addInfo, setAddInfo] = useState({});

    //值周类型管理
    const [addKind, setAddKind] = useState(false);
    const [addKindTitle, setAddKindTitle] = useState("");
    const [editKindTitle, setEditKindTitle] = useState("");
    const [kindVisible, setKindVisible] = useState(false);
    const [kindList, setKindList] = useState([]);

    //值日设置
    const [dayVisible, setDayVisible] = useState(false);
    const [dayInfo, setDayInfo] = useState([]);
    const [dayEditVisible, setDayEditVisible] = useState(false);
    const [dayEditInfo, setDayEditInfo] = useState({});

    //统计详情
    const [statisticVisible, setStatisticVisible] = useState(false);
    const [statisticInfo, setStatisticInfo] = useState([]);
    const [statisticType, setStatisticType] = useState("week");
    const [statisticRange, setStatisticRange] = useState("");
    const [statisticTotal, setStatisticTotal] = useState(0);
    const [statisticIndex, setStatisticIndex] = useState(1);

    //值周记录
    const [weekVisible, setWeekVisible] = useState(false);
    const [weekInfo, setWeekInfo] = useState({});
    const [weekList, setWeekList] = useState([]);
    const [weekTotal, setWeekTotal] = useState(0);
    const [weekIndex, setWeekIndex] = useState(1);
    const [addWeekVisible, setAddWeekVisible] = useState(false);
    const [addWeekContent, setAddWeekContent] = useState("");

    const getTermWeekList = () => {
        if (!currentTermInfo.startDate || !currentTermInfo.endDate) {
            return
        }
        let url = window.BasicProxy + `/api/dutyWeek/list/getWeekId/weekName`;
        fetch
            .get({
                url, params: {
                    schoolTermStart: currentTermInfo.startDate,
                    schoolTermEnd: currentTermInfo.endDate,
                    schoolId: sessionStorage.getItem("schoolId")
                }
            })
            .then((res) => res.json())
            .then((res) => {
                if (res.code == 200 && Array.isArray(res.data)) {
                    setTermWeekList(res.data);
                    let target = "";
                    res.data.forEach((item) => {
                        if (item.isCurrentWeek) {
                            target = item.weekId;
                        }
                    })
                    if (target) {
                        setCurrentWeek(target);
                    } else if (res.data[0]) {
                        setCurrentWeek(res.data[0].weekId);
                    } else {
                        setInfoList([]);
                        setCurrentWeek("");
                        setCurrentIndex(0);
                    }
                }
            })
    }
    const getCurrentTerm = () => {
        let url = window.BasicProxy + `/api/common/school/term/current/info`;
        fetch
            .get({
                url, params: {
                    schoolId: sessionStorage.getItem("schoolId")
                }
            })
            .then((res) => res.json())
            .then((res) => {
                if (res.code == 200 && res.data) {
                    let info = res.data;
                    let obj = {
                        startDate: info.termStartDate && info.termStartDate.substr(0, 10),
                        schoolId: info.schoolId,
                        endDate: info.termEndDate && info.termEndDate.substr(0, 10),
                        termInfo: info.term,
                        termName: `${info.term.substr(0, 9)}学年第${info.term.substr(info.term.length - 1)}学期`,
                        termStatus: info.termStatus
                    }
                    setTerm(info.term);
                    setCurrentTermInfo(obj);
                }
            })
    }
    const getTermList = () => {
        let url = window.BasicProxy + `/api/common/school/term/history`;
        fetch
            .get({
                url, params: {
                    schoolId: sessionStorage.getItem("schoolId")
                }
            })
            .then((res) => res.json())
            .then((res) => {
                if (res.code == 200 && Array.isArray(res.data)) {
                    let list = res.data.map((item) => {
                        item.termName = `${item.termInfo.substr(0, 9)}学年第${item.termInfo.substr(item.termInfo.length - 1)}学期`
                        return item;
                    })
                    list = list.reverse();
                    setTermList(list);
                    getCurrentTerm();
                }
            })
    }
    const getKindList = () => {
        let url = window.BasicProxy + `/api/dutyWeek/type/get`;
        fetch
            .get({
                url, params: {
                    schoolId: sessionStorage.getItem("schoolId")
                }
            })
            .then((res) => res.json())
            .then((res) => {
                if (res.code == 200 && Array.isArray(res.data)) {
                    setKindList(res.data);
                }
            })
    }
    //获取列表
    const getList = () => {
        if (!currentWeek) {
            setInfoList([]);
            return;
        }
        setLoadVisible(true);
        let url = window.BasicProxy + `/api/dutyWeek/info/detail`;
        let params = {
            weekId: currentWeek
        };
        fetch
            .get({ url, params })
            .then((res) => res.json())
            .then((res) => {
                if (res.code == 200 && res.data) {
                    setInfoList([res.data]);
                }
                setLoadVisible(false);
            })
    }
    //列表排序
    const changeCount = (index, count, countSign) => {
        tableHeader[index].orderNum = count;
        if (countSign === "updateTitle") {
            tableHeader[2].orderNum = 0;
        } else {
            tableHeader[0].orderNum = 0;
        }
        getList(count, countSign);
    }
    const changeTerm = (value) => {
        let termInfo = {};
        termList.forEach((item) => {
            if (item.termInfo === value) {
                termInfo = item;
            }
        })
        setCurrentTermInfo(termInfo);
        setTerm(value);
    }
    const changeKindModal = (value) => {
        setKindVisible(value);
        if (!value) {
            setAddKindTitle("");
            setEditKindTitle("");
        } else {
            getKindList();
        }
    }
    const changeAddModal = (value) => {
        setAddModalVisible(value);
        if (!value) {
            setAddInfo({});
        }
    }
    const changeStatisticModal = (value) => {
        setStatisticVisible(value);
        if (!value) {
            setStatisticInfo({});
        } else {
            statisticHander.getStatistic();
        }
    }
    const changeAddWeekModal = (value) => {
        setAddWeekVisible(value);
        if (!value) {
            setAddWeekContent("");
        }
    }
    const changeWeekModal = (value, data) => {
        setWeekVisible(value);
        if (!value) {
            setWeekInfo({});
            setWeekList([]);
            setWeekTotal(0);
            setWeekIndex(1);
            setAddWeekVisible(false);
            setAddWeekContent("");
        } else {
            weekHander.getWeekList(data ? data : {});
        }
    }
    const changeDayModal = (value) => {
        setDayVisible(value);
        if (!value) {
        } else {
            dayHander.getList();
        }
    }

    //控制抽屉的显隐
    const changeDrawer = (type, value) => {
        if (type === "dayEdit") {
            setDayEditVisible(value);
            if (!value) {
                setDayEditInfo({});
            }
        }
    }

    //值日设置
    const dayHander = {
        getList: function () {
            let url = window.BasicProxy + `/api/dutyWeek/setting/getTeacher`;
            fetch
                .get({
                    url, params: {
                        schoolId: sessionStorage.getItem("schoolId")
                    }
                })
                .then((res) => res.json())
                .then((res) => {
                    if (res.code == 200 && Array.isArray(res.data)) {
                        res.data.forEach((item) => {
                            item.week = weekTextInfo[item.weekDay];
                        })
                        setDayInfo(res.data);
                    }
                })
        },
        setDetail: function () {
            let list = JSON.parse(JSON.stringify(dayInfo));
            let teacherInfo = dayEditInfo.teacherInfo ? dayEditInfo.teacherInfo : {};
            let updateList = [];
            if (!teacherInfo.userId && !teacherInfo.UserID) {
                message.warn(`请选择值日老师`);
                return;
            }
            if (!dayEditInfo.teacherPhone) {
                message.warn(`联系方式不能为空`);
                return;
            }
            if (!/^[0-9|\-|/]*$/g.test(dayEditInfo.teacherPhone)) {
                message.warn(`联系方式格式不正确，应由数字、 -、 /组成`);
                return;
            }
            list.forEach((item) => {
                if (item.week === dayEditInfo.week) {
                    updateList.push({
                        ...item,
                        teacherName: teacherInfo.userName || teacherInfo.UserName,
                        teacherId: teacherInfo.userId || teacherInfo.UserID,
                        headshot: teacherInfo.photoPath || teacherInfo.PhotoPath,
                        teacherPhone: dayEditInfo.teacherPhone
                    });
                } else {
                    updateList.push(item);
                }
            })
            setDayInfo(updateList);

            changeDrawer("dayEdit", false);
        },
        getDetail: function (data) {
            data.teacherInfo = {
                UserName: data.teacherName,
                UserID: data.teacherId,
                PhotoPath: data.headshot
            }
            setDayEditInfo(data);
            changeDrawer("dayEdit", true);
        },
        editInfo: function (key, value) {
            let info = JSON.parse(JSON.stringify(dayEditInfo));
            console.log("editInfo", key, value);
            if (key === "teacherInfo") {
                let url = window.BasicProxy + `/api/common/user/contact/information`;
                fetch
                    .get({
                        url, params: {
                            userId: value.userId || value.UserID
                        }
                    })
                    .then((res) => res.json())
                    .then((res) => {
                        if (res.code == 200) {
                            let data = res.data;
                            let tel = !Array.isArray(data) ? data ? data.telephone || data.telephone2 : "" : data[0] ? data[0].telephone || data[0].telephone2 : "";
                            info[key] = value;
                            info["teacherPhone"] = tel;
                            setDayEditInfo(info);
                        }
                    });
                return;
            }
            info[key] = value;
            setDayEditInfo(info);
        },
        setDay: function () {
            let url = window.BasicProxy + `/api/dutyWeek/setting/update`;
            fetch
                .put({ url, body: dayInfo })
                .then((res) => res.json())
                .then((res) => {
                    if (res.code == 200) {
                        message.success("设置成功");
                        dayHander.getList();
                        changeDayModal(false);
                    }
                })
        }
    }
    //值周类型设置
    const kindHander = {
        //操作服务类型
        operateKind: (data, type) => {
            if (type === "add") {
                if (kindList.length > 19) {
                    message.warn("服务类型最多只能添加20个");
                    return;
                }
                if (!addKindTitle) {
                    message.warn("服务类型名称不能为空！");
                    return;
                }
                let url = window.BasicProxy + "/api/dutyWeek/type/create";
                fetch
                    .post({
                        url, body: {
                            createWeekTypeList: [addKindTitle],
                            schoolId: sessionStorage.getItem("schoolId")
                        }
                    })
                    .then((res) => res.json())
                    .then((data) => {
                        if (data.code == 200) {
                            message.success("添加成功");
                            kindHander.cancelAddKind();
                            getKindList();
                        }
                    })
            }
            if (type === "edit") {
                let url = window.BasicProxy + "/api/dutyWeek/type/update";
                fetch
                    .put({
                        url, body: {
                            updateWeekTypeList: [{
                                weekTypeId: data.weekTypeId,
                                weekType: editKindTitle
                            }],
                            schoolId: sessionStorage.getItem("schoolId")
                        }
                    })
                    .then((res) => res.json())
                    .then((data) => {
                        if (data.code == 200) {
                            message.success("编辑成功");
                            getKindList();
                        }
                    })
            }
            if (type === "delete") {
                let url = window.BasicProxy + "/api/dutyWeek/type/delete";
                fetch
                    .delete({
                        url, body: {
                            deleteWeekTypeIdList: [data.weekTypeId]
                        }
                    })
                    .then((res) => res.json())
                    .then((data) => {
                        if (data.code == 200) {
                            message.success("删除成功");
                            getKindList();
                            getList();
                            setAlertInfo({});
                        }
                    })
            }
        },
        deleteKind: (data) => {
            setAlertInfo({
                title: "确定要删除该类型吗？",
                data,
                visible: true,
                onOk: function () {
                    kindHander.operateKind(data, "delete")
                },
                onCancel: function () {
                    setAlertInfo({});
                }
            })
        },
        editKind: (targetIndex, type) => {
            let list = JSON.parse(JSON.stringify(kindList));
            if (type) {
                list.forEach((item, index) => {
                    if (index === targetIndex) {
                        item.isEdit = true;
                        setEditKindTitle(item.weekType);
                    } else {
                        item.isEdit = false;
                    }
                })
            } else {
                list.forEach((item, index) => {
                    item.isEdit = false;
                })
            }

            setKindList(list);
        },
        //取消添加服务类型
        cancelAddKind: () => {
            setAddKindTitle("");
            setAddKind(false);
        },
    }
    //统计详情
    const statisticHander = {
        changeStatisticType: function (value) {
            setStatisticType(value);
        },
        changeStatisticRange: function (dates) {
            console.log(dates)
            let arr = [];
            if (!Array.isArray(dates)) {
                return;
            }
            dates.forEach((item) => {
                arr.push(moment(item).format("YYYY-MM-DD"))
            })
            setStatisticRange(arr);
        },
        getStatistic: function () {
            let timeObj = getCurrentWeekDate();
            let timeArr = [timeObj.startTime, timeObj.endTime];
            console.log(timeArr)
            console.log(timeObj)
            if (!statisticRange[0]) {
                setStatisticRange(timeArr);
            }
            if (statisticType === "week") {  //值周统计
                let url = window.BasicProxy + `/api/dutyWeek/stats/dutyWeekCount`;
                fetch
                    .get({
                        url, params: {
                            startTime: statisticRange[0] ? statisticRange[0] : timeArr[0],
                            endTime: statisticRange[1] ? statisticRange[1] : timeArr[1],
                            current: statisticIndex,
                            pageSize: 9,
                            schoolId: sessionStorage.getItem("schoolId")
                        }
                    })
                    .then((res) => res.json())
                    .then((res) => {
                        if (res.code == 200 && res.data) {
                            setStatisticInfo(res.data);
                            setStatisticTotal(res.total);
                        }
                    })
            } else {   //值日统计
                let url = window.BasicProxy + `/api/dutyWeek/stats/dutyDayCount`;
                fetch
                    .get({
                        url, params: {
                            startTime: statisticRange[0],
                            endTime: statisticRange[1],
                            current: statisticIndex,
                            pageSize: 9,
                            schoolId: sessionStorage.getItem("schoolId")
                        }
                    })
                    .then((res) => res.json())
                    .then((res) => {
                        if (res.code == 200 && res.data) {
                            setStatisticInfo(res.data);
                            setStatisticTotal(res.total);
                        }
                    })
            }
        },
        output: function () {
            if (statisticType === "week") {  //值周统计
                let url = window.BasicProxy + `/api/dutyWeek/stats/dutyWeekCount/export?startTime=${statisticRange[0]}&endTime=${statisticRange[1]}&schoolId=${sessionStorage.getItem("schoolId")}&lg_tk=${sessionStorage.getItem("token")}`;
                window.open(url);
            } else { // 值日
                let url = window.BasicProxy + `/api/dutyWeek/stats/dutyDayCount/export?startTime=${statisticRange[0]}&endTime=${statisticRange[1]}&schoolId=${sessionStorage.getItem("schoolId")}&lg_tk=${sessionStorage.getItem("token")}`;
                window.open(url);
            }
        }
    }
    //值周记录
    const weekHander = {
        getWeekList: function (data) {
            let url = window.BasicProxy + `/api/dutyWeek/stats/getPage/record`;
            fetch
                .get({
                    url, params: {
                        weekId: data ? data.weekId : weekInfo.weekId,
                        current: weekIndex,
                        pageSize: 9
                    }
                })
                .then((res) => res.json())
                .then((res) => {
                    if (res.code == 200 && res.data) {
                        setWeekList(res.data);
                        setWeekTotal(res.total);
                    }
                })
        },
        addMethod: function () {
            if (!addWeekContent) {
                message.warn("值周记录内容不能为空");
                return;
            }
            let url = window.BasicProxy + `/api/dutyWeek/stats//create/record`;
            fetch
                .post({
                    url, body: {
                        weekId: weekInfo.weekId,
                        schoolId: sessionStorage.getItem("schoolId"),
                        recordTime: constructionDate(),
                        recordContent: addWeekContent,
                        recorderId: sessionStorage.getItem("userId"),
                        recorder: sessionStorage.getItem("userName"),
                        headshot: ""
                    }
                })
                .then((res) => res.json())
                .then((res) => {
                    if (res.code == 200) {
                        message.success("添加成功");
                        changeAddWeekModal(false);
                        weekHander.getWeekList();
                    }
                })
        },
        output: function () {
            let url = window.BasicProxy + `/api/dutyWeek/stats/export/record?weekId=${weekInfo.weekId}&schoolId=${sessionStorage.getItem("schoolId")}&lg_tk=${sessionStorage.getItem("token")}`;
            window.open(url);
        }
    }
    //值周列表处理
    const listHander = {
        changeCurrent: function (type) {
            if (type === "prev") {
                setCurrentIndex(currentIndex - 1);
                setCurrentWeek(termWeekList[currentIndex - 1].weekId);
            } else {
                setCurrentIndex(currentIndex + 1);
                setCurrentWeek(termWeekList[currentIndex + 1].weekId);
            }
        },
        detail: function (data) {
            setWeekInfo(data);
            changeWeekModal(true, data);
        },
        edit: function (data, e) {
            e && e.stopPropagation();
            let url = window.BasicProxy + `/api/dutyWeek/info/detail`;
            let params = {
                weekId: data.weekId
            };
            fetch
                .get({ url, params })
                .then((res) => res.json())
                .then((res) => {
                    if (res.code == 200 && res.data) {
                        setAddInfo(res.data);
                        setAddModalVisible(true);
                    }
                })
        },
        delete: function (data, e) {
            e && e.stopPropagation();
            setAlertInfo({
                visible: true,
                title: "确定要删除该值周吗？",
                onCancel: function () {
                    setAlertInfo({});
                },
                onOk: function () {
                    let url = window.BasicProxy + `/api/dutyWeek/manage/delete`;
                    let body = {
                        weekId: data.weekId
                    };
                    fetch
                        .delete({ url, body })
                        .then((res) => res.json())
                        .then((res) => {
                            if (res.code == 200) {
                                message.success("删除成功");
                                setAlertInfo({});
                                getTermWeekList();
                            }
                        })
                }
            })
        }
    }
    // const [skin, setSkin] = useState('')
    // useEffect(() => {
    //     let baseUrl = sessionStorage.getItem('baseUrl')
    //     fetch
    //         .get({
    //             url: baseUrl + "/openapi/v1/system/facade/getSkin",
    //             params: {
    //                 appid: 260,
    //                 token: sessionStorage.getItem('token')
    //             }
    //         })
    //         .then(result => result.json())
    //         .then(res => {
    //             console.log(res)
    //             if (res.StatusCode == 200) {
    //                 setSkin(`s${res.Data.skin}`)
    //                 sessionStorage.setItem('skin', `s${res.Data.skin}`)
    //                 console.log(`s${res.Data.skin}`)
    //                 // resolve()

    //             }
    //         });
    // }, [])
    useEffect(() => {
        console.log(getQueryVariable("isManage"))
        if (statisticIndex === 1) {
            statisticHander.getStatistic();
        } else {
            setStatisticIndex(1);
        }
    }, [statisticRange, statisticType]);
    useEffect(() => {
        statisticHander.getStatistic();
    }, [statisticIndex])
    useEffect(() => {
        let target = 0;
        termWeekList.forEach((item, index) => {
            if (item.weekId === currentWeek) {
                target = index;
            }
        })
        setCurrentIndex(target);
        getList();
    }, [currentWeek]);
    useEffect(() => {
        getTermWeekList();
    }, [currentTermInfo]);
    useEffect(() => {
        if (!weekInfo.weekId) {
            return;
        }
        weekHander.getWeekList();
    }, [weekIndex]);
    useLayoutEffect(() => {
        getTermList();
        getKindList();
        dayHander.getList();
    }, []);
    useEffect(() => {
        let list = JSON.parse(JSON.stringify(infoList));
        list.forEach((item, index) => {
            item.weekAllName = (
                <span key={index} className="week_allName">
                    {item.weekName}
                    <span style={{ margin: "0 7px" }}>
                        {item.weekStartTime && item.weekStartTime.substr(0, 10)}~{item.weekEndTime && item.weekEndTime.substr(0, 10)}
                    </span>
                    {
                        item.weekGroupId === sessionStorage.getItem("userId") ?
                            <span className="duty_sign">值周</span> :
                            ""
                    }
                </span>
            )
            item.weekInfo = (
                <div className="one_week_info" key={index}>
                    <div className="week_info_one" title={`组长: ${item.weekGroupName} ${item.weekGroupPhone}`}>
                        组长: {item.weekGroupName} <span style={{ color: "#999" }}>{item.weekGroupPhone}</span>
                    </div>
                    {
                        Array.isArray(item.dutyWeekTeacherList) &&
                        item.dutyWeekTeacherList.map((child, index2) => (
                            <div key={index2} title={child.teacherName} className="week_info_one">
                                {child.weekType}:&nbsp;
                                {child.teacherName ? child.teacherName : "--"}
                            </div>
                        ))
                    }
                </div>
            )
            item.dayInfo = (
                <div className="one_day_info" key={index}>
                    {
                        Array.isArray(item.dutyDayTeacherList) &&
                        item.dutyDayTeacherList.map((child, index2) => (
                            <div key={index2} title={`${child.dayTime && child.dayTime.substr(5, 5)}(${weekTextInfo[child.weekDay]}): ${child.teacherName} ${child.teacherPhone}`} className="day_info_one">
                                <span>{child.dayTime && child.dayTime.substr(5, 5)}</span>
                                <span style={{ color: "#999", marginRight: 8 }}>({weekTextInfo[child.weekDay]}):</span>
                                {child.teacherName ? child.teacherName : "--"}
                                {
                                    child.teacherPhone ?
                                        <span style={{ color: "#999", marginLeft: 5 }}>{child.teacherPhone}</span> :
                                        ""
                                }

                            </div>
                        ))
                    }
                </div>
            )

            //判断当前老师是否是值周老师
            let userId = sessionStorage.getItem("userId"), weekSign = false;
            Array.isArray(item.dutyWeekTeacherList) &&
                item.dutyWeekTeacherList.forEach((item) => {
                    if (item.teacherId === userId) {
                        weekSign = true;
                    }
                })
            //判断当前老师是否是值日老师，值日老师也允许编辑值周记录
            Array.isArray(item.dutyDayTeacherList) &&
                item.dutyDayTeacherList.forEach((item) => {
                    if (item.teacherId === userId) {
                        weekSign = true;
                    }
                })
            if (userId === item.weekGroupId) {
                weekSign = true;
            }
            item.weekSign = weekSign;
            item.operate_group = (
                <div className="btn_group" key={index}>
                    {
                        // sessionStorage.getItem("identityCode") === "IC0001" || 
                        // sessionStorage.getItem("identityCode") === "IC0002"?
                        getQueryVariable('isManage') == 1 ?
                            <>
                                {
                                    weekSign ?
                                        <span className="code_btn" onClick={(e) => listHander.detail(item, e)}>编辑值周记录</span> :
                                        <span className="code_btn" onClick={(e) => listHander.detail(item, e)}>查看值周记录</span>
                                }
                                <span className="code_btn" onClick={(e) => listHander.edit(item, e)}>编辑</span>
                                <span className="code_btn" style={{ color: "#ef5757" }} onClick={(e) => listHander.delete(item, e)}>删除</span>
                            </> :
                            weekSign ?
                                <span className="code_btn" onClick={(e) => listHander.detail(item, e)}>编辑值周记录</span> :
                                <span className="code_btn" onClick={(e) => listHander.detail(item, e)}>查看值周记录</span>
                    }
                </div>
            )
        })
        console.log("infoList", list);
        setUpdateInfoList(list);
    }, [infoList]);
    return (

        <div className="app_main">
            <Loading opacity={false} spinning={loadVisible} tip="加载中...">
                <div className="main_select_option">
                    <Select className="term_select" value={term} onChange={changeTerm}>
                        {
                            termList.map((item, index) => (
                                <Option value={item.termInfo} key={index}>{item.termName}</Option>
                            ))
                        }
                    </Select>
                    {
                        //   sessionStorage.getItem("identityCode") === "IC0001" || 
                        //   sessionStorage.getItem("identityCode") === "IC0002"?
                        getQueryVariable('isManage') == 1 ?
                            <div className="option_right">
                                <div className="lightblue_btn" onClick={() => changeKindModal(true)}><i className="kindlogo"></i>值周类型设置</div>
                                <div className="lightblue_btn" onClick={() => changeDayModal(true)}><i className="daylogo"></i>值日设置</div>
                                <div className="blue_btn" onClick={() => changeStatisticModal(true)}><i className="statisticlogo"></i>查看统计</div>
                                <div className="green_btn" onClick={() => changeAddModal(true)}><i className="addlogo"></i>添加值周</div>
                            </div> :
                            ""
                    }

                </div>
                <div className="slice_line"></div>
                <div className="current_page_info">
                    {
                        currentIndex === 0 ?
                            "" :
                            <span className="prev_text" onClick={() => listHander.changeCurrent("prev")}><i></i>上一周</span>
                    }
                    <span style={{ marginLeft: "40px" }}>{currentTermInfo.termName}</span>
                    <Select
                        className="change_page_select"
                        value={currentWeek}
                        onChange={(value) => setCurrentWeek(value)}>
                        {
                            termWeekList.length > 0 ?
                                termWeekList.map((item, index) => (
                                    <Option value={item.weekId} key={index}>{item.weekName}</Option>
                                )) :
                                <Option value="">未选择</Option>
                        }
                    </Select>
                    <span style={{ marginRight: "40px" }}>{infoList[0] ? `(${getRuleTime(infoList[0].weekStartTime, "/", 1)}-${getRuleTime(infoList[0].weekEndTime, "/", 1)})` : ""}</span>
                    {
                        !termWeekList.length || currentIndex === termWeekList.length - 1 ?
                            "" :
                            <span className="next_text" onClick={() => listHander.changeCurrent("next")}>下一周<i></i></span>
                    }
                </div>
                <TableList
                    tableHeader={tableHeader}
                    className="main_table"
                    getList={changeCount}
                    // trClick={listHander.detail}
                    scrollbar={false}
                    // emptyText={""}
                    data={updateInfoList}
                ></TableList>

            </Loading>
            {
                addModalVisible ?
                    <AddModal
                        visible={addModalVisible}
                        kindList={kindList}
                        termList={termList}
                        changeKindModal={changeKindModal}
                        getTermWeekList={getTermWeekList}
                        currentTermInfo={currentTermInfo}
                        dayInfo={dayInfo}
                        currentTerm={term}
                        getList={getList}
                        editInfo={addInfo}
                        changeAddModal={changeAddModal} /> :
                    ""
            }


            {/* 值周类型设置 */}
            <Modal
                width={700}
                height={372}
                title="值周类型设置"
                // className={'kind_modal'}
                className={sessionStorage.getItem('skin') == 's1' ? 'kind_modal s1' : sessionStorage.getItem('skin') == 's2' ? 'kind_modal s2' :
                sessionStorage.getItem('skin') == 's3' ? 'kind_modal s3' : sessionStorage.getItem('skin') == 's4' ? 'kind_modal s4' :
                sessionStorage.getItem('skin') == 's5' ? 'kind_modal s5' : 'kind_modal s6'}
                visible={kindVisible}
                noFooter={true}
                onCancel={() => changeKindModal(false)}
                changeVisible={changeKindModal}>
                <div className="kind_container" onClick={(e) => {
                    if ($(e.target).attr("class") === "kind_container") {
                        kindHander.editKind();
                    }
                }}>
                    {
                        kindList.map((item, index) => {
                            if (item.isEdit) {
                                return (
                                    <div className="add_kind_container" style={{ marginRight: 10 }}>
                                        <input type="text" value={editKindTitle} maxLength={6} onChange={(e) => setEditKindTitle(e.target.value)} autoFocus />
                                        <i className="oklogo" onClick={() => kindHander.operateKind(item, "edit")}></i>
                                        <i className="nologo" onClick={() => kindHander.editKind(index)}></i>
                                    </div>
                                )
                            }
                            return (
                                <div key={index} className="kind_one" onDoubleClick={() => kindHander.editKind(index, 1)}>
                                    <i className="closelogo" onClick={() => kindHander.deleteKind(item)}></i>
                                    {item.weekType}
                                </div>
                            )
                        })
                    }
                    {
                        addKind ?
                            <div className="add_kind_container">
                                <input type="text" maxLength={6} onChange={(e) => setAddKindTitle(e.target.value)} autoFocus />
                                <i className="oklogo" onClick={() => kindHander.operateKind("", "add")}></i>
                                <i className="nologo" onClick={kindHander.cancelAddKind}></i>
                            </div> :
                            <div className="add_btn" onClick={() => setAddKind(true)}>新增类型</div>
                    }
                </div>
            </Modal>

            {/* 值日设置 */}
            <Modal
                width={650}
                height={403}
                title="值日设置"
                // className={'day_modal'}
                className={sessionStorage.getItem('skin') == 's1' ? 'day_modal s1' : sessionStorage.getItem('skin') == 's2' ? 'day_modal s2' :
                    sessionStorage.getItem('skin') == 's3' ? 'day_modal s3' : sessionStorage.getItem('skin') == 's4' ? 'day_modal s4' :
                        sessionStorage.getItem('skin') == 's5' ? 'day_modal s5' : 'day_modal s6'}
                // className={skin == 's1' ? 'day_modal s1' : skin == 's2' ? 'day_modal s2' :
                // skin == 's3' ? 'day_modal s3' : skin == 's4' ? 'day_modal s4' :
                //         skin == 's5' ? 'day_modal s5' : 'day_modal s6'}
                visible={dayVisible}
                noFooter={true}
                onCancel={() => changeDayModal(false)}
                changeVisible={changeDayModal}>
                <p className="day_title">设置默认值日老师:</p>
                <div className="list-table">
                    <div className="table-thead">
                        <div className="table-th" style={{ width: "16%" }}>时间</div>
                        <div className="table-th" style={{ width: "30%" }}>值日老师</div>
                        <div className="table-th" style={{ width: "30%" }}>联系方式</div>
                        <div className="table-th" style={{ width: "24%" }}>操作</div>
                    </div>
                    {
                        dayInfo.length > 0 ?
                            dayInfo.map((item, index) => (
                                <div className="table-tr" key={index}>
                                    <div className="table-td" style={{ width: "16%" }}>{item.week}</div>
                                    <div className="table-td" style={{ width: "30%" }}
                                        title={item.teacherName ? item.teacherName : "暂未设置"}>
                                        {
                                            item.teacherName ?
                                                item.teacherName :
                                                <span style={{ color: "#999" }}>暂未设置</span>
                                        }
                                    </div>
                                    <div className="table-td" style={{ width: "30%" }} title={item.teacherPhone ? item.teacherPhone : "暂未设置"}>
                                        {item.teacherPhone ? item.teacherPhone : <span style={{ color: "#999" }}>暂未设置</span>}
                                    </div>
                                    <div className="table-td" style={{ width: "24%" }}>
                                        <span className="operate_btn" onClick={() => dayHander.getDetail(item)}>编辑</span>
                                    </div>
                                </div>
                            )) :
                            <Empty
                                // className={"list-empty"}
                                style={{ margin: "100px 0" }}
                                title={"暂无内容~"}
                                type={"3"}
                            ></Empty>
                    }
                </div>
                <div className="modal_footer">
                    <div className="confirm_btn" onClick={dayHander.setDay}>确定</div>
                    <div className="cancel_btn" onClick={() => changeDayModal(false)}>取消</div>
                </div>
                <Drawer
                    title={
                        <p className="drawer_title">编辑<i className="closelogo" onClick={() => changeDrawer("dayEdit", false)}></i></p>
                    }
                    width={365}
                    placement="right"
                    className="day_edit_drawer"
                    visible={dayEditVisible}
                    closable={false}
                    maskStyle={{ opacity: 0.5, animation: "none" }}
                    getContainer={false}
                    style={{ position: 'absolute' }}
                    onClose={() => changeDrawer("dayEdit", false)}>
                    <InfoOption
                        optionName="值日老师"
                        type="search"
                        width={240}
                        optional={true}
                        userType="0,1,11"
                        getVal={(value) => dayHander.editInfo("teacherInfo", value)}
                        value={dayEditInfo.teacherInfo} />
                    <InfoOption
                        optionName="联系方式"
                        type="input"
                        maxLength={11}
                        optional={true}
                        width={200}
                        getVal={(value) => dayHander.editInfo("teacherPhone", value)}
                        value={dayEditInfo.teacherPhone} />
                    <div className="regular_footer">
                        <div className="ok_btn" onClick={dayHander.setDetail}>确定</div>
                        <div className="no_btn" onClick={() => changeDrawer("dayEdit", false)}>取消</div>
                    </div>
                </Drawer>
            </Modal>

            {/* 查看统计详情 */}
            <Modal
                width={737}
                height={492}
                title="查看统计详情"
                // className={'statistic_modal'}
                className={sessionStorage.getItem('skin') == 's1' ? 'statistic_modal s1' : sessionStorage.getItem('skin') == 's2' ? 'statistic_modal s2' :
                    sessionStorage.getItem('skin') == 's3' ? 'statistic_modal s3' : sessionStorage.getItem('skin') == 's4' ? 'statistic_modal s4' :
                        sessionStorage.getItem('skin') == 's5' ? 'statistic_modal s5' : 'statistic_modal s6'
                }
                // className={skin == 's1' ? 'statistic_modal s1' : skin == 's2' ? 'statistic_modal s2' :
                // skin == 's3' ? 'statistic_modal s3' : skin == 's4' ? 'statistic_modal s4' :
                //         skin == 's5' ? 'statistic_modal s5' : 'statistic_modal s6'}
                visible={statisticVisible}
                noFooter={true}
                onCancel={() => changeStatisticModal(false)}
                changeVisible={changeStatisticModal}>
                <div className="option_container">
                    <span
                        className={`type_one ${statisticType === "week" ? "active" : ""}`}
                        onClick={() => statisticHander.changeStatisticType("week")}>值周统计</span>
                    <span
                        className={`type_one ${statisticType === "day" ? "active" : ""}`}
                        onClick={() => statisticHander.changeStatisticType("day")}>值日统计</span>
                    <span className="slice_line"></span>
                    <RangePicker
                        value={Array.isArray(statisticRange) ? statisticRange.map(item => moment(item)) : ""}
                        onChange={(dates) => statisticHander.changeStatisticRange(dates)} />
                    <span className="output_btn" onClick={statisticHander.output}>导出</span>
                </div>
                <Scrollbars style={{ width: "100%", height: 420 }}>
                    {/* <div className="overflow_auto"> */}
                    {
                        statisticType === "week" ?
                            <div className="list-table" style={{ width: kindList.length < 6 ? "" : (kindList.length + 1) * 116 + 1 }}>
                                <div className="table-thead">
                                    <div className="table-th" style={kindList.length < 6 ? { width: "16%" } : { width: 116 }}>姓名</div>
                                    {
                                        kindList.map((item, index) => {
                                            let width = kindList.length < 6 ? Math.floor(84 / kindList.length) + "%" : 116;
                                            return (
                                                <div
                                                    className="table-th"
                                                    style={{ width: width }}
                                                    title={item.weekType}
                                                    key={index}>{item.weekType}</div>
                                            )
                                        })
                                    }
                                </div>
                                {
                                    statisticInfo.length > 0 ?
                                        statisticInfo.map((item, index) => (
                                            <div className="table-tr" key={index}>
                                                <div className="table-td" style={{ width: kindList.length < 6 ? "16%" : 116, fontSize: "12px" }}>{item.teacherName}</div>
                                                {
                                                    Array.isArray(item.dutyWeekTypeCountList) &&
                                                    item.dutyWeekTypeCountList.map((child, index2) => {
                                                        let width = item.dutyWeekTypeCountList.length < 6 ? Math.floor(84 / item.dutyWeekTypeCountList.length) + "%" : 116;
                                                        return (
                                                            <div
                                                                className="table-td"
                                                                style={{ width: width }}
                                                                key={index2}
                                                                title={child.count + "次"}>{child.count}次</div>
                                                        )
                                                    })
                                                }
                                            </div>
                                        )) :
                                        <Empty
                                            // className={"list-empty"}
                                            style={{ margin: "100px 0" }}
                                            title={"暂无内容~"}
                                            type={"3"}
                                        ></Empty>
                                }
                            </div> :
                            <div className="list-table">
                                <div className="table-thead">
                                    <div className="table-th" style={{ width: "40%" }}>姓名</div>
                                    <div className="table-th" style={{ width: "60%" }}>值日次数</div>
                                </div>
                                {
                                    statisticInfo.length > 0 ?
                                        statisticInfo.map((item, index) => (
                                            <div className="table-tr" key={index}>
                                                <div className="table-td" style={{ width: "40%", fontSize: "12px" }} title={item.teacherName}>{item.teacherName}</div>
                                                <div className="table-td" style={{ width: "60%" }} title={item.count + "次"}>{item.count}次</div>
                                            </div>
                                        )) :
                                        <Empty
                                            // className={"list-empty"}
                                            style={{ margin: "100px 0" }}
                                            title={"暂无内容~"}
                                            type={"3"}
                                        ></Empty>
                                }
                            </div>
                    }
                    {/* </div> */}
                </Scrollbars>
                <div className="pagination_container">
                    {
                        statisticTotal > 9 ?
                            <ConfigProvider locale={zhCN}>
                                <Pagination
                                    className="table_pagination"
                                    size="small"
                                    total={Number(statisticTotal)}
                                    current={statisticIndex}
                                    pageSize={9}
                                    showQuickJumper={false}
                                    showSizeChanger={false}
                                    hideOnSinglePage
                                    onChange={(pageIndex) => {
                                        setStatisticIndex(pageIndex);
                                    }} />
                            </ConfigProvider> :
                            ""
                    }
                </div>
            </Modal>

            {/* 查看值周记录 */}
            <Modal
                width={737}
                height={492}
                title="查看值周记录"
                className="week_modal"
                visible={weekVisible}
                noFooter={true}
                onCancel={() => changeWeekModal(false)}
                changeVisible={changeWeekModal}>
                <div className="option_container">
                    共<span style={{ color: "#333" }}>{weekTotal}</span>条记录
                    {
                        weekList.length > 0 ?
                            <span className="output_btn" onClick={weekHander.output}>导出</span> :
                            ""
                    }
                    {
                        weekInfo.weekSign ?
                            <span className="add_btn" onClick={() => changeAddWeekModal(true)}><i></i>添加记录</span> :
                            ""
                    }
                </div>
                <div className="list-table">
                    <div className="table-thead">
                        <div className="table-th" style={{ width: "25%" }}>时间</div>
                        <div className="table-th" style={{ width: "50%" }}>内容</div>
                        <div className="table-th" style={{ width: "25%" }}>记录人</div>
                    </div>
                    {
                        weekList.length > 0 ?
                            weekList.map((item, index) => (
                                <div className="table-tr" key={index}>
                                    <div
                                        className="table-td"
                                        style={{ width: "25%", fontSize: "12px", color: "#999", textAlign: "center" }}>
                                        {item.recordTime && item.recordTime.substr(0, 16)}
                                    </div>
                                    <div className="table-td" style={{ width: "50%" }} title={item.recordContent}>
                                        {item.recordContent}
                                    </div>
                                    <div className="table-td" style={{ width: "25%" }} title={item.recorder}>
                                        {item.recorder}
                                    </div>
                                </div>
                            )) :
                            <Empty
                                // className={"list-empty"}
                                style={{ margin: "100px 0" }}
                                title={"暂无内容~"}
                                type={"3"}
                            ></Empty>
                    }
                    <div className="pagination_container" style={{ marginRight: 0 }}>
                        {
                            weekTotal > 9 ?
                                <ConfigProvider locale={zhCN}>
                                    <Pagination
                                        className="table_pagination"
                                        size="small"
                                        total={Number(weekTotal)}
                                        current={weekIndex}
                                        pageSize={9}
                                        showQuickJumper={false}
                                        showSizeChanger={false}
                                        hideOnSinglePage
                                        onChange={(pageIndex) => {
                                            setWeekIndex(pageIndex);
                                        }} />
                                </ConfigProvider> :
                                ""
                        }
                    </div>
                </div>
            </Modal>

            <Modal
                width={540}
                height={296}
                title="添加值周记录"
                className="add_week_modal"
                visible={addWeekVisible}
                onOk={weekHander.addMethod}
                onCancel={() => changeAddWeekModal(false)}
                changeVisible={changeAddWeekModal}>
                <InfoOption
                    type="textarea"
                    optionName="内容"
                    maxLength={200}
                    placeholder="请输入值周内容"
                    width={437}
                    height={180}
                    value={addWeekContent}
                    getVal={(value) => setAddWeekContent(value)} />
            </Modal>

            <BtnAlert
                visible={alertInfo.visible}
                title={alertInfo.title}
                data={alertInfo.data}
                smallTitle={alertInfo.smallTitle}
                onOk={alertInfo.onOk}
                onCancel={alertInfo.onCancel} />

        </div>
    )
}

export default Main;